<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Top Diagram: Side View ---

        // Pipe walls (thick lines)
        ctx.lineWidth = 3;
        const topY = 60;
        const bottomY = 120;
        const pipeStartX = 80;
        const pipeEndX = 360;
        ctx.beginPath();
        ctx.moveTo(pipeStartX, topY);
        ctx.lineTo(pipeEndX, topY);
        ctx.moveTo(pipeStartX, bottomY);
        ctx.lineTo(pipeEndX, bottomY);
        ctx.stroke();

        // Dimension D
        ctx.lineWidth = 1.5;
        const dimX = 60;
        ctx.beginPath();
        // Vertical line
        ctx.moveTo(dimX, topY);
        ctx.lineTo(dimX, bottomY);
        // Ticks (serifs) to form an 'I' shape rotated 90 degrees
        ctx.moveTo(dimX - 10, topY);
        ctx.lineTo(dimX, topY);
        ctx.moveTo(dimX - 10, bottomY);
        ctx.lineTo(dimX, bottomY);
        ctx.stroke();

        // Label D
        ctx.fillText('D', dimX - 25, (topY + bottomY) / 2);

        // Charge Q and z-axis
        const midY = (topY + bottomY) / 2; // 90
        const chargeX = 150;
        
        // Point charge Q
        ctx.beginPath();
        ctx.arc(chargeX, midY, 3, 0, 2 * Math.PI);
        ctx.fill();
        
        // Label Q
        ctx.fillText('Q', chargeX + 5, midY - 15);
        
        // z-axis line
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        ctx.moveTo(chargeX, midY);
        const zAxisEndX = 340;
        ctx.lineTo(zAxisEndX, midY);
        
        // z-axis arrowhead
        ctx.moveTo(zAxisEndX, midY);
        ctx.lineTo(zAxisEndX - 10, midY - 5);
        ctx.moveTo(zAxisEndX, midY);
        ctx.lineTo(zAxisEndX - 10, midY + 5);
        ctx.stroke();
        
        // z-axis label
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('z', zAxisEndX + 15, midY);
        ctx.font = '20px Times New Roman'; // Reset font


        // --- Bottom Diagram: Cross-section ---
        const centerX = 200;
        const centerY = 250;

        // Square pipe walls
        ctx.lineWidth = 3;
        const innerSide = 80;
        const outerSide = 94;
        ctx.strokeRect(centerX - innerSide / 2, centerY - innerSide / 2, innerSide, innerSide);
        ctx.strokeRect(centerX - outerSide / 2, centerY - outerSide / 2, outerSide, outerSide);

        // Coordinate axes
        ctx.lineWidth = 1.5;
        const axisLength = 70;
        ctx.beginPath();
        
        // Y-axis
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(centerX, centerY - axisLength);
        // Y-arrowhead
        ctx.moveTo(centerX, centerY - axisLength);
        ctx.lineTo(centerX - 5, centerY - axisLength + 10);
        ctx.moveTo(centerX, centerY - axisLength);
        ctx.lineTo(centerX + 5, centerY - axisLength + 10);
        
        // X-axis
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(centerX + axisLength, centerY);
        // X-arrowhead
        ctx.moveTo(centerX + axisLength, centerY);
        ctx.lineTo(centerX + axisLength - 10, centerY - 5);
        ctx.moveTo(centerX + axisLength, centerY);
        ctx.lineTo(centerX + axisLength - 10, centerY + 5);
        ctx.stroke();
        
        // Axis labels
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('y', centerX, centerY - axisLength - 12);
        ctx.fillText('x', centerX + axisLength + 12, centerY);
        ctx.font = '20px Times New Roman'; // Reset font

        // Charge Q at origin
        // Dot at origin
        ctx.beginPath();
        ctx.arc(centerX, centerY, 2.5, 0, 2 * Math.PI);
        ctx.fill();
        // Label Q in the second quadrant
        ctx.fillText('Q', centerX - 15, centerY - 15);

        // Figure caption
        ctx.fillText('Fig. 1.47', centerX, 350);
    </script>
</body>
</html>